import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom';

import Detail from './Detail/Detail'

export default class Message extends Component {
    state = {
        messageArr: [
            {id:'01',title:"消息1"},
            {id:'02',title:"消息2"},
            {id:'03',title:"消息3"},
        ]
    }
    render() {
        let { messageArr} = this.state;
        return (
            <div>
                <ul>
                    {
                        messageArr.map(messageObj => {
                            return (
                                <li key={messageObj.id}>
                                    {/* 向路由组件传递parans参数 */}
                                    {/* <Link to={`/home/message/detail/${messageObj.id}/${messageObj.title}`} >{messageObj.title}</Link> */}

                                    {/* 向路由组件传递search参数 */}
                                    {/* <Link to={`/home/message/detail?id=${messageObj.id}&title=${messageObj.title}`} >{messageObj.title}</Link> */}
                                    
                                    {/* 向路由组件传递state参数 */}
                                    <Link to={{pathname:'/home/message/detail',state:{id:messageObj.id,title:messageObj.title}}} >{messageObj.title}</Link>
                                    
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/* 声明接收parans参数 */}
                {/* <Route path="/home/message/detail" component={ Detail } /> */}

                {/* search参数无需声明接收，正常注册路由即可 */}
                {/* <Route path="/home/message/detail" component={ Detail } /> */}

                {/* state参数无需声明接收，正常注册路由即可 */}
                <Route path="/home/message/detail" component={ Detail } />

            </div>
        )
    }
}
